import React, { useState, useEffect } from 'react';
import Taro from '@tarojs/taro';
import {AtIcon} from 'taro-ui'
import {View, Block, Navigator, Button} from '@tarojs/components'
import {getHeadTop, GetRequest} from '../../../utils/tools'
import {getMenuButtonBoundingClientRect} from "../../../utils/getCommonData";
import './header-car.scss'

const headTop = getHeadTop()
const HeaderCar: React.FC<{ isLogin?: boolean;shu?: string;isProduct?: boolean; showShare?: boolean; showMenu?: boolean; title?: string; color?: string; tabColor?: string; backgroundColor?: string; bcolor?: string }> = (props) => {
  const [showBack, setShowBack] = useState(true)
  const [showNav, setShowNav] = useState(false)
  const [menuInfo, setMenuInfo] = useState(getMenuButtonBoundingClientRect())
  const [sysInfo, setSysInfo] = useState('')
  useEffect(() => {
    const pages = Taro.getCurrentPages();
    if (pages.length <= 1) {
      setShowBack(false)
    }
    Taro.getSystemInfo({
      success: (res) => {
        setSysInfo(res.model)
      }
    })
  }, [menuInfo])
  const showMenu = () => {
    setShowNav(!showNav)
  }

  const _env = Taro.getCurrentInstance().router.params.env;
  return (
    <View className='header-car'
      style={`height: ${menuInfo.height}px;padding-top: ${(headTop && (headTop.statusBar + headTop.top)) || 0}px;background-color:${props.backgroundColor}`}
    >
      <View className='box-car'>
        {_env != 'pc' &&
        <View className={`left ${!props.showMenu && 'flex-start'}`}
          style={`height: ${menuInfo.height}px;color:${props.tabColor};border-color:${props.bcolor ? props.bcolor : '#eee'}`}
        >
          {showBack && _env != 'pc' &&
          <View className='back' onClick={() => Taro.navigateBack()}><AtIcon value='chevron-left' size='18'
            color={props.tabColor}
          /></View>}
          {!showBack && _env != 'pc' &&
          <View className='home' onClick={() => Taro.switchTab({url: '/pages/index/index'})}><AtIcon
            prefixClass='at-icon' value='home' size='18' color={props.tabColor}
          /></View>}
          {props.showMenu && <Block>
            <View className='shu' style={`background-color:${props.shu ? props.shu : '#dbdbdb'}`} />
            <View className='menu' onClick={showMenu.bind(this)}><AtIcon prefixClass='at-icon' value='menu' size='18'
              color={props.tabColor}
            /></View>
          </Block>}
        </View>}
        {showNav && _env != 'pc' && <View className='nav' onClick={showMenu.bind(this)}>
          <Navigator className='nav-li' url='/pages/index/index' openType='switchTab' hoverClass='none'><AtIcon
            className='icon' prefixClass='xxhz' value='shouye1' size='16' color='black'
          />首页</Navigator>
          <Navigator className='nav-li' url='/common/search/search' hoverClass='none'><AtIcon className='icon'
            prefixClass='xxhz'
            value='sousuo'
            size='16'
            color='black'
          />搜全站</Navigator>
          <Navigator className='nav-li' url='/main/shopcar/index' hoverClass='none'><AtIcon className='icon'
            prefixClass='xxhz'
            value='gouwuche' size='16'
            color='black'
          />购物车</Navigator>
          <Navigator className='nav-li' url='/pages/my/index/index' openType='switchTab' hoverClass='none'><AtIcon
            className='icon' prefixClass='xxhz' value='wode1' size='16' color='black'
          />个人中心</Navigator>
          <Navigator className='nav-li' url='/distributor/contact/contact' hoverClass='none'><AtIcon className='icon'
            prefixClass='xxhz'
            value='icon-test7'
            size='16'
            color='black'
          />联系客服</Navigator>
        </View>}
        {showNav && _env != 'pc' && <View className='ZZ' onClick={showMenu.bind(this)} />}
        {props.title && <View className='title' style={`color: ${props.color};${_env == 'pc' ? 'margin: 0 auto;' : ''}`}>{props.title}</View>}
        {process.env.TARO_ENV !== 'h5' && props.showShare && props.isLogin &&
        <Button className={`share-box top-fixed-share invite-box-item ${props.isProduct && 'isProduct'}`}
          openType='share' style={`right:${ (sysInfo === 'iPhone 5' || sysInfo.includes('iPhone SE')) ? '65rpx' : '60rpx' };`}
        >
          <View className='share-icon share-icon-header' style={`width: ${((sysInfo === 'iPhone 5' || sysInfo.includes('iPhone SE')) ? menuInfo.height + 4.5 : menuInfo.height) * 2}rpx;height: ${((sysInfo === 'iPhone 5' || sysInfo.includes('iPhone SE')) ? menuInfo.height + 4.5 : menuInfo.height) * 2}rpx;`}><AtIcon customStyle='font-weight:bolder;' size='18px' color='#000' value='icon icon-fenxiang-01-01' /></View>
        </Button>}
      </View>
    </View>
  )
}

HeaderCar.defaultProps = {
  title: '',
  color: 'white',
  showMenu: true,
  isLogin: false,
  showShare: false,
  tabColor: '#000',
  backgroundColor: '#FFF',
  bcolor: '#eee'
}

export default HeaderCar
